<template>
  <div>
    <div class="rating_page">
      <head-top head-title="我的余额" :go-back='true'></head-top>
      <section class="content_container">
        <section class="content">
          <header class="content_header">
            <span class="content_title_style">当前余额</span>
            <section class="contetn_description">
              <span class="question-detail">
                  <yd-icon name="question" size="0.7rem" color="#3190E8"></yd-icon>
                </span>
              <router-link to="/balance/detail" class="content_title_style">
                余额说明
              </router-link>
            </section>
          </header>
          <p class="content_num">
            <span>{{rmbNum}}</span>
            <span>元</span>
          </p>
          <!--按钮直接绑定在button上，事件无效-->
          <div class="btn" @click.stop="tixian">
            <button  class="yd-btn-block" :class="[!btnValid ? 'yd-btn-disabled':'yd-btn-primary']">提现</button>
          </div>
        </section>
      </section>
      <p class="deal_detail">交易明细</p>
      <div class="no_log">
        <img src="../../images/no-log.png">
        <p>暂无明细记录</p>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  export default {
    data(){
      return{
        btnValid:false,
        rmbNum:0.00
      }
    },
    methods: {
      tixian(){
        if(this.rmbNum===0){
          this.$dialog.alert({mes: '暂无可提现金额！'});
        }

      }
    },
    components:{
      headTop
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../src/style/mixin';
  .rating_page{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;
    background:#f2f2f2;
    padding-top: 1.95rem;
  }
  .btn{
    margin:0.5rem auto;
  }
  .content_container{
    padding: .3rem;
    background-color: $blue;
    .content{
      padding: .4rem;
      background-color: #fff;
      border-radius: .15rem;
      .content_header{
        @include fj;
        font-size: .55rem;
        .contetn_description{
          display: flex;
          align-items: center;
          img{
            @include wh(.6rem, .6rem);
            margin-right: .2rem;
          }
          .content_title_style{
            color: $blue;
          }
        }
        .content_title_style{
          color: #666;
        }
      }
      .content_num{
        span:nth-of-type(1){
          @include sc(1.8rem, #333);
        }
        span:nth-of-type(2){
          @include sc(.7rem, #333);
        }
      }
      .promit_button{
        @include wh(100%, 2rem);
        @include sc(.8rem, #fff);
        border-radius: 0.15rem;
        line-height: 2rem;
        margin-top: 1rem;
        text-align: center;
        background-color: #ccc;
      }
    }
  }
  .question-detail{
    vertical-align: middle;
    margin-right: .2rem;
  }
  .deal_detail{
    @include sc(.6rem, #999);
    line-height: 2rem;
    padding-left: .5rem;
  }
  .no_log{
    text-align: center;
    margin-top: 1rem;
    img{
      display: inline-block;
      @include wh(8rem, 5rem);
    }
    p{
      margin-top: .5rem;
      @include sc(.7rem, #666);
    }
  }
</style>
